<template>
  <a-transfer
    ref="aTransferRef"
    v-model="selectedData"
    :data="data"
    :left-title="'可选城市'"
    :right-title="'已选城市'"
    :left-filters="[{ placeholder: '按城市名筛选' }]"
    :button-texts="['To left', 'To right']"
    :button-display="['false', 'false']"
    filterable
  >
    <template #left-filters-com>
      <el-select
        v-model="selectData"
        size="small"
        style="margin-bottom: 10px"
        @change="change"
        clearable
        @clear="handleClearSelect"
      >
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <!-- 自定义插槽左侧无数据状态 -->
    <template #left-empty>
      <el-empty :image-size="60" description="No data" />
    </template>
    <!-- 自定义插槽右侧无数据状态 -->
    <template #right-empty>
      <el-empty :image-size="60" description="No data" />
    </template>
    <template #custom-buttons>
      <el-button type="primary" @click="aTransferRef.moveToLeft()"
        >移到左边</el-button
      >
      <el-button type="primary" @click="aTransferRef.moveToRight()"
        >移到右边</el-button
      >
    </template>
  </a-transfer>
</template>

<script lang="ts" setup>
import aTransfer from "@/components/aTransfer";
const aTransferRef = ref();
const selectedData = ref([]); // 右侧已选数据
// 全部数据
const data = ref([
  { key: "bj", label: "北京", pinyin: "beijing" },
  { key: "sh", label: "上海", pinyin: "shanghai" },
  { key: "gz", label: "广州", pinyin: "guangzhou" },
  { key: "sz", label: "深圳", pinyin: "shenzhen" },
  { key: "cd", label: "成都", pinyin: "chengdu" },
]); // 左侧未选数据

const selectData = ref("");

const options = ref([
  { label: "测试001", value: "1" },
  { label: "测试002", value: "2" },
  { label: "测试003", value: "3" },
]);

const options1 = ref([
  { key: "nj", label: "南京", pinyin: "nanjing" },
  { key: "xz", label: "徐州", pinyin: "xuzhou" },
  { key: "ah", label: "安徽", pinyin: "anhui" },
  { key: "hs", label: "黄山", pinyin: "huangshan" },
  { key: "cq", label: "重庆", pinyin: "chongqing" },
  { key: "gz", label: "广州", pinyin: "guangzhou" },
]);

const options2 = ref([
  { key: "jsz", label: "尖沙咀", pinyin: "jianshazui" },
  { key: "xg", label: "香港", pinyin: "xianggang" },
  { key: "am", label: "澳门", pinyin: "aomen" },
  { key: "mg", label: "美国", pinyin: "meiguo" },
  { key: "hg", label: "韩国", pinyin: "hanguo" },
]);

function change(val) {
  console.log("val ===", val);

  if (val == 1) {
    data.value = options1.value;
  } else if (val == 2) {
    data.value = options2.value;
  } else {
    data.value = [];
  }
}

function handleClearSelect() {
  data.value = [
    { key: "bj", label: "北京", pinyin: "beijing" },
    { key: "sh", label: "上海", pinyin: "shanghai" },
    { key: "gz", label: "广州", pinyin: "guangzhou" },
    { key: "sz", label: "深圳", pinyin: "shenzhen" },
    { key: "cd", label: "成都", pinyin: "chengdu" },
  ];
}

</script>

<style>
</style>